sotos.image-crop module for angular

Demo crop images, put watermark and save

Mobile Demo Download GitHub

Directive for crop images in angular

html

                <html lang="en">
                <body>
                <image-crop image-out="imageOut"  crop-options="options" ng-transclude >
                <edit-crop></edit-crop>
                <view-crop></view-crop>
                </image-crop>
                </body>
                </html>

Settings 


         //set the module
         var app = angular.module('app',['sotos.crop-image']);

         app.controller('cropFullCtrl',['$scope',function($scope){
            //the image to output
            $scope.imageOut='';

            //make the options settings

            $scope.options={};                      // required
            $scope.options.image="image.jpg";       // image for crop required
            $scope.options.viewSizeWidth= 500;      // canvas size default 480
            $scope.options.viewSizeHeight= 500;

            $scope.cropOptions.viewShowRotateBtn= true;   //if rotate tool show default true

            $scope.options.outputImageWidth= 0 ; //output size of image 0 take the size of source image
            $scope.options.outputImageHeight= 0;
            $scope.options.outputImageRatioFixed= true; //keep the ratio of source image
            $scope.options.outputImageType= "jpeg"; //output image type
            //if this check the image crop by the original size off image and no resize
            $scope.options.outputImageSelfSizeCrop= true;

            //show the crop tool use only for crop and crop again one image
            $scope.options.viewShowCropTool= true;

            //this is the watermark if is set the watermark tool
            //show after crop
            //watermark type = text or image
            $scope.options.watermarkType='image';
            //set the image
            $scope.options.watermarkImage= null;
            //set text if type is text
            $scope.options.watermarkText= null;
            //settings for the text canvas textfill
            $scope.options.watermarkTextFillColor= 'rgba(0,0, 0, 0.8)'; //color of the letters
            $scope.options.watermarkTextFont= 'Arial'; //font

            //if window is modal
            $scope.options.inModal=true;

            // $broadcast functions

            // cropImage : crop the image and data fill the imageOut with the image.
            // reload the view with the crop image if watermark is set then watermark tool shows.

             $scope.cropImage= function(){
                $scope.$broadcast('cropImage');
             };

            // cropImageSave : send the image to the window.open() to save the image
            $scope.saveImage= function(){
                  $scope.$broadcast('cropImageSave');
            };

            // cropImageShow : after crop output the image with the watermark to the imageOut

            $scope.cropImageShow= function(){
                $scope.$broadcast('cropImageShow');
            };
         }]);

Some demos

Image Crop with dbclick or button put watermark text after crop.

Drop Image Here to edit your image 
            app.controller('cropCtrl',['$scope',function($scope){
            $scope.options={};
            $scope.options.image="sotos.jpg";
            $scope.options.watermarkType="text";
            $scope.options.watermarkText="sotos";
            $scope.options.outputImageType= "png";

            $scope.cropImage= function(){
            $scope.$broadcast('cropImage');
            };

             $scope.showImage= function(){
             $scope.$broadcast('cropImageShow');
             };

            }]);

Image Out

Image Crop with dbclick or button put watermark image after crop.

Drop Image Here to edit your image 
        app.controller('cropCtrl',['$scope',function($scope){
            $scope.options={};
            $scope.options.image="image.jpg";
            $scope.options.watermarkType="image";
            $scope.options.watermarkImage="wimage.jpg";
            $scope.options.viewSizeWidth=400;


            $scope.showImage= function(){
                 $scope.$broadcast('cropImageShow');
            };
            $scope.cropImage= function(){
                $scope.$broadcast('cropImage');
            };
        }]);

Image Out

full test

Drop Image Here to edit your image
Drop Watermark Image Here 
       options: {{options|json}}

Image Out